<template>
  <el-dialog title="修改图集" :visible.sync="dialogFormVisible">
    <el-form>
      <el-form-item label="选择图集" :label-width="formLabelWidth">
        <upload-single-file ref="uploadSingleFileRef" @update-file-list="updateFileList"></upload-single-file>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadSingleFile from '../../../../components/upload/uploadSingleFile'

export default {
  name: 'operateImages',
  components: {uploadSingleFile},
  data () {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      imageList: [],
      hostAddress: null,
      hub:null,
    }
  },
  methods: {
    updateFileList (fileList,file) {

      if(fileList.length<this.imageList.length){
        console.log("用户删除了图片，被删除的图片是",file,fileList);

        file.url

        this.imageList = this.imageList.filter(img=>{
          return file.url.indexOf(img.imgUrl) === -1;
        })

        this.hub.$emit('update-image-list-of-step1',this.imageList)

        return ;
      }


      let imagesList = fileList.map((file,index) => {
        if (file.raw) {
          return {
            imgUrl: file.raw.key,
            defaultImg: null,
            id: null,
            imgName:file.raw.name,
            imgSort: index+1,
            spuId: null
          }
        }
      })


      imagesList = imagesList.filter(img=>{
        return img != null;
      })

      this.imageList = this.imageList.concat(imagesList)

      console.log('dialog更新了fileList', fileList, this.imageList);

      this.hub.$emit('update-image-list-of-step1',this.imageList);

      this.initImageList(this.imageList);
    },
    initImageList (val) {

      this.imageList = val;

      console.log('dialog收到图片', val)

      this.$refs.uploadSingleFileRef.fileList = [];

      val.forEach((img, index) => {
        this.$refs.uploadSingleFileRef.fileList.push({
          url: this.hostAddress + img.imgUrl,
          name: img.imgName
        })
      })
    }
  },
}
</script>

<style scoped>

</style>
